<template>
  <div class="article-create">
    <el-card>
      <el-input class="title-input" placeholder="请输入标题" v-model="title" maxlength="20" clearable>
      </el-input>
      <el-tabs v-model="activeName">
        <el-tab-pane label="markdown" name="markdown">
          <markdown :title="title" :detailData="detailData" @onSuccess="onSuccess"></markdown>
        </el-tab-pane>
        <el-tab-pane label="富文本" name="editor">
          <editor :title="title" :detailData="detailData" @onSuccess="onSuccess"></editor>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRequest } from 'vue-request'
import { useRoute } from 'vue-router'
import Editor from './components/Editor.vue'
import Markdown from './components/Markdown.vue'
import { articleDetail } from '@/api/article.js'
const route = useRoute()
const title = ref('')
const activeName = ref('markdown')
const { data: detailData } = useRequest(async () => {
  if (!route.params.id) return {}
  return await articleDetail(route.params.id)
}, {
  initialData: {},
  onSuccess: (data) => {
    title.value = data.title
  }
})

const onSuccess = () => {
  title.value = ''
}

</script>

<style lang="scss" scoped>
.title-input {
  margin-bottom: 20px;
}
</style>